<template>
  <div class="page-padding-bg">

    <div class="manager">
      <div class="manager_title">

        <!-- 原生input  是:value    lay-inp是modelValue  -->
        <div> <span>会议名称：</span><lay-input size="sm" v-model="smokeModel" placeholder="请输入" @keydown.enter="search_btn"></lay-input></div>
        <div> <span>会议时间：</span>
          <!-- <lay-date-picker v-model="smokeTime" simple type="date" size="sm" placeholder="请选择" @change="search_btn"></lay-date-picker> -->
          <el-date-picker v-model="smokeTime" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search_btn" style="width: 240px;" />
        </div>
        <div>
          <lay-button class="btn-search" size="sm" type="normal" @click="search_btn">查询</lay-button>
          <lay-button class="btn-resert" size="sm" @click="resert">重置</lay-button>
        </div>
      </div>

      <div class="manager_btn">
        <lay-button class="btn-add" size="sm" type="primary" @click="add" v-permissions="'smokeMeeting_add'"> 新增</lay-button>

        <!-- <lay-button class="btn-export" size="sm" v-if="nowMenuBtnArr.includes('导出申请表')">导出申请表</lay-button> -->

      </div>

      <div class="manager_table">
        <lay-table :resize="true" :height="'100%'" :columns="columns" :data-source="dataSource" :default-toolbar="false">

          <!--  评吸会议  评吸状态 -->
          <template #meetingStatus="{ row }">
            <el-tag
              :type="row.meetingStatus==0?'danger':row.meetingStatus==1?'primary':row.meetingStatus==2?'success':''">{{ row.meetingStatus==0?'未开始':row.meetingStatus==1?'进行中':row.meetingStatus==2?'已完成':'-' }}</el-tag>
            <!-- <span :style="{color:row.meetingStatus==0?'':row.meetingStatus==1?'red':row.meetingStatus==2?'#48b078':''}">{{ row.meetingStatus==0?'未开始':row.meetingStatus==1?'进行中':row.meetingStatus==2?'已完成':'-' }}</span> -->
          </template>
          <!-- 评吸会议   操作 -->
          <template v-slot:mettoperator="{ row }">
            <lay-button size="xs" link type="primary" @click="edit_tab(row)" v-permissions="'smokeMeeting_edit'" v-if="row.meetingStatus==0"> 修改</lay-button>
            <lay-button size="xs" link type="danger" @click="del_tab(row)" v-permissions="'smokeMeeting_delete'" v-if="row.meetingStatus==0"> 删除</lay-button>
            <!--   <el-button size="small" link v-if="nowMenuBtnArr.includes('查看')"> 查看</el-button> -->
            <!-- :style="{color:row.meetingStatus==0?'':row.meetingStatus==1?'red':row.meetingStatus==2?'#48b078':''}" -->
            <lay-button size="xs" :type="row.meetingStatus==0?'normal':row.meetingStatus==1?'normal':row.meetingStatus==2?'':''" @click="start_task(row)" v-permissions="'start_metting'">
              {{ row.meetingStatus==0?'开始会议':row.meetingStatus==1?'继续会议':row.meetingStatus==2?'查看会议':'-' }}
            </lay-button>
            <lay-button link size="xs" @click="smoke_setting(row)" v-permissions="'smoke_setting'" v-if="row.meetingStatus==0">会议设置</lay-button>
          </template>

        </lay-table>
        <Pagination :currentPage="currentPage" :limit="limit" :total="total" @page_change="page_change"></Pagination>

        <!-- 弹层 -->
        <lay-layer v-model="is_visible" :area="['700px', '500px']" :title="visibleTitle" :btn="visible_opteron" :shadeClose="false">
          <div style="padding: 20px 40px 20px 20px;">
            <lay-form :model="form" ref="layFormRef11">
              <lay-form-item label="评吸名称" prop="meetingName" required>
                <lay-input v-model="form.meetingName" size="sm" placeholder="请输入"></lay-input>
              </lay-form-item>
              <lay-form-item label="评吸时间" prop="meetingTime" required>
                <lay-date-picker v-model="form.meetingTime" placeholder="请选择" simple type="date" style="width: 100%;"></lay-date-picker>
              </lay-form-item>
              <lay-form-item label="记录人" prop="recorder" required>
                <lay-select v-model="form.recorder" placeholder="请选择" style="width: 100%;" :disabled="visibleTitle=='查看任务'">
                  <lay-select-option :value="item.key" :label="item.title" v-for="item in userList1" :key="item.key"></lay-select-option>
                </lay-select>

              </lay-form-item>
              <lay-form-item label="负责人" prop="header" required>
                <lay-select v-model="form.header" placeholder="请选择" style="width: 100%;" :disabled="visibleTitle=='查看任务'">
                  <lay-select-option :value="item.key" :label="item.title" v-for="item in userList1" :key="item.key"></lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="部门" prop="orgId" required>
                <!-- <lay-select v-model="form.orgId" placeholder="请选择" style="width: 100%;" size="sm" :disabled="isAddEdit=='view'">
                  <lay-select-option :value="item.orgId" :label="item.orgName" v-for="item in orgList" :key="item.orgId"></lay-select-option>
                </lay-select> -->
                <lay-tree-select v-model="form.orgId" :data="orgList" :replaceFields="{id:'orgId',title:'orgName',children:'children'}" placeholder="请选择" style="width: 100%;"></lay-tree-select>
              </lay-form-item>
              <lay-form-item label="评吸任务" prop="classifyList" required>
                <lay-checkbox-group v-model="form.classifyList" ref="checkboxRef" @change="groupChange($event)">
                  <lay-checkbox name="like" skin="primary" value="0">单点评吸</lay-checkbox>
                  <lay-checkbox name="like" skin="primary" value="1">对比评吸</lay-checkbox>
                  <lay-checkbox name="like" skin="primary" value="2">三点评吸</lay-checkbox>
                  <!-- <lay-checkbox name="like" skin="primary" value="3">竞品评吸</lay-checkbox> -->
                  <lay-checkbox name="like" skin="primary" value="4">单料评吸</lay-checkbox>
                  <lay-checkbox name="like" skin="primary" value="5">对比排序</lay-checkbox>
                </lay-checkbox-group>
              </lay-form-item>

            </lay-form>
          </div>
        </lay-layer>

        <!-- <router-view></router-view> -->
      </div>
    </div>
  </div>
</template>
  
  
<script setup lang="ts">
import { layer } from "@layui/layui-vue";
import http from "@/http/index";
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination.vue";
import { useRouter } from "vue-router";

import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
const store = useCounterStore();
const { nowMenuBtnArr } = storeToRefs(store); //  数据

const router = useRouter();

// 弹层title
const visibleTitle = ref("");
// 弹层状态
const is_visible = ref(false);
const layFormRef11 = ref();
// add? edit?
const isAddEdit = ref("");

// 弹层表单
const form = ref({
  meetingName: "",
  meetingTime: "",
  classifyList: "",
  orgId: "",
  numberList: [],
  recorder: "",
  header: "",
});

// 表格配置
const columns = ref([
  {
    title: "会议名称",
    key: "meetingName",
  },
  {
    title: "会议时间",
    key: "meetingTime",
  },
  {
    // 0:未开始 1:进行中 2:已完
    title: "会议状态",
    key: "meetingStatus",
    customSlot: "meetingStatus",
  },
  {
    title: "创建人",
    key: "creator",
  },

  {
    title: "操作",
    customSlot: "mettoperator",
    key: "mettoperator",
    width: "300px",
  },
]);
const dataSource = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);

// 分页
const limit = ref(10);
const total = ref(0);
const currentPage = ref(1);

// 分页事件
const page_change = async (page, limt) => {
  console.log(page, limt);
  currentPage.value = page;
  pageNo.value = page;
  await get_list(page, limt);
};

// 查询
// 评吸名称
const smokeModel = ref("");
// 评吸状态
const smokePerk = ref("");
// 评吸时间
const smokeTime = ref("");

// 添加
const add = () => {
  resert_form();
  // layFormRef11.value.reset();
  is_visible.value = true;
  visibleTitle.value = "会议添加";
  isAddEdit.value = "add";
};
// 修改
const edit_tab = async (row) => {
  console.log(row);
  if (row.meetingStatus != "0") {
    layer.msg("已开始/已完成的任务不能设置！！！", { time: 2000, icon: 2 });
    return false;
  }

  await get_mett_detail(row.id);
  form.value.meetingName = row.meetingName;
  form.value.meetingTime = row.meetingTime;
  form.value.orgId = row.orgId;
  form.value.id = row.id;
  form.value.header = row.header;
  form.value.recorder = row.recorder;
  is_visible.value = true;
  visibleTitle.value = "会议修改";
  isAddEdit.value = "edit";
  console.log(form.value);
};
// 删除
const del_tab = (row) => {
  layer.confirm("确认要删除吗？", {
    btn: [
      {
        text: "确认",
        callback: async (id) => {
          const res = await http.corsApi("/smokeMeeting/batch", "delete", [row.id]);
          console.log(res);
          if (res.data) {
            await get_list(pageNo.value, pageSize.value);
            await layer.confirm("删除成功", { icon: 1 });
          }
          layer.close(id);
        },
      },
      {
        text: "取消",
        callback: (id) => {
          layer.close(id);
        },
      },
    ],
  });
};
// 弹层按钮
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      form.value.numberList = form.value.classifyList;
      console.log(form.value);

      layFormRef11.value.validate(async (isValidate, model, errors) => {
        if (isValidate) {
          console.log(checkboxRef.value);
          // if (form.value.meetingName == "" || form.value.meetingTime == "" || form.value.classifyList.length <= 0) {
          //   layer.msg("请检查输入收否完整", { time: 1500, icon: 2 });
          //   return false;
          // }
          let data = {};
          let tip = "";
          let methods = "";
          if (isAddEdit.value == "add") {
            data = form.value;
            tip = "添加";
            methods = "post";
          } else if (isAddEdit.value == "edit") {
            data = form.value;
            tip = "修改";
            methods = "put";
          }

          const res = await http.corsApi("/smokeMeeting", methods, data);
          console.log(res);
          if (res.data) {
            await get_list(pageNo.value, pageSize.value);
            layer.confirm(tip + "成功", { icon: 1 });
            is_visible.value = false;
          }
        }
      });
    },
  },
  {
    text: "取消",
    callback: () => {
      console.log("取消操作");
      is_visible.value = false;
      // layer.confirm("取消操作", { shade: true });
    },
  },
]);

const checkboxRef = ref();
// 复选框事件
const groupChange = function (val) {
  console.log("回调:" + JSON.stringify(val));
};

// 查询
const search_btn = async () => {
  await get_list(pageNo.value, pageSize.value);
};

// 重置
const resert = async () => {
  smokeModel.value = "";
  smokePerk.value = "";
  smokeTime.value = "";
  await get_list(pageNo.value, pageSize.value);
};

// 列表
const get_list = async (page: number | string, pagesize: number | string) => {
  // const res = await http.corsApi("/smokeMeeting/query", "get", {
  // const start = smokeTime.value[0]
  // const start = smokeTime.value[0]
  console.log(smokeTime.value);

  const res = await http.corsApi("/smokeMeeting/page", "get", {
    pageNo: page,
    pageSize: pagesize,
    meetingName: smokeModel.value,
    // meetingTime: smokeTime.value,
    beginTime: smokeTime?.value[0] || "",
    endTime: smokeTime?.value[1] || "",
    // smokePerk: smokePerk.value,
  });

  console.log(res);
  dataSource.value = res.data.list;
  total.value = res.data.totalCount;
};
const resert_form = () => {
  form.value.meetingName = "";
  form.value.meetingTime = "";
  form.value.classifyList = "";
  form.value.orgId = "";
  form.value.numberList = [];
  form.value.header = "";
  form.value.recorder = "";
};

// 获取会议详情
const get_mett_detail = async (id) => {
  const res = await http.corsApi(`smokeMeeting/${id}`, "get", {}, { is_msg: false });
  console.log(res.data.meetingAllRepList);
  if (res.data) {
    form.value.numberList = [];
    form.value.classifyList = [];
    res.data.meetingAllRepList.forEach((element) => {
      form.value.numberList.push(element.classify);
      form.value.classifyList.push(element.number);
    });
  }
};

// 评吸设置
const smoke_setting = (row) => {
  console.log(row);

  if (row.meetingStatus != "0") {
    layer.msg("已开始/已完成的任务不能设置！！！", { time: 2000, icon: 2 });
    return false;
  }

  // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"评吸烟支设置"}`);
  router.push(`/smokePanel/metting/settingNew?id=${row.id}&title=${"评吸烟支设置"}`);
};

// 开始任务
const start_task = (row) => {
  // row.meetingStatus==0?'开始任务':row.meetingStatus==1?'继续任务':row.meetingStatus==2?'查看任务':'-'
  console.log(row);
  if (row.meetingStatus == 0) {
    layer.confirm("确认要开始任务吗", {
      title: "提示",
      btn: [
        {
          text: "确认",
          callback: async (id) => {
            const res = await http.corsApi(`/smokeMeeting/startTask/${row.id}`, "put", { id: row.id });
            console.log(res);
            layer.close(id);
            if (res.data) {
              // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"开始任务"}`);
              router.push(`/smokePanel/metting/settingNew?id=${row.id}&title=${"开始任务"}`);
            }
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    });
  } else if (row.meetingStatus == 1) {
    // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"开始任务"}`);
    router.push(`/smokePanel/metting/settingNew?id=${row.id}&title=${"开始任务"}`);
  } else if (row.meetingStatus == 2) {
    router.push(`/smokePanel/metting/settingNew?id=${row.id}&title=${"查看任务"}`);
    // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"查看任务"}`);

    // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"查看任务"}`);
    // 查看任务
  }

  // router.push(`/smokePanel/metting/setting?id=${row.id}&title=${"开始任务"}`);
};

const userList1 = ref([]);
// 获取用户列表
const get_user_list = async () => {
  const res = await http.corsApi("/secUser/getUserList", "get", {});
  console.log(res);
  userList1.value = res.data;
};

const orgList = ref([]);
// 获取部门列表
const get_org_list_tree = async () => {
  // const res = await http.corsApi("/secOrg/getOrgAllTreeData", "get", {});
  const res = await http.corsApi("/secOrg", "get", {});
  console.log(res);
  orgList.value = res.data;
};

// 页面初始化、
onMounted(() => {
  get_org_list_tree();
  get_list(pageNo.value, pageSize.value);
  get_user_list();
});
</script>
  
  <style scoped>
</style>




<style scoped lang="scss">
.manager {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  &_title {
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
      align-items: center;
      margin-right: 35px;
      span {
        white-space: nowrap;
        text-align: right;
      }
      .layui-input {
        width: 300px;
      }
    }
  }

  &_btn {
    // margin-right: 8px;
    margin-top: 20px;
  }
  &_table {
    margin-top: 20px;
  }
}
</style>